<template>
  <div class="add">
    <div class="addContent">
      <el-form
        ref="form"
        :model="addFrom"
        label-width="60px"
        label-position="left"
      >
        <el-row class="addBoxRow">
          <el-col :span="12">
            <el-form-item :label="translationData.date + '：'">
              <el-input
                v-model="addFrom.date"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="translationData.name + '：'">
              <el-input
                v-model="addFrom.name"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="translationData.address + '：'">
              <el-input
                v-model="addFrom.address"
                size="small"
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer addFooter">
      <el-button size="small" @click="cancelAdd">取 消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        @click="confirmAdd"
      >
        确 定
      </el-button>
    </span>
  </div>
</template>

<script>
import translation from './translation.json'

export default {
  name: 'Add',
  data() {
    return {
      translationData: translation, // 翻译文件数据
      addFrom: {},
      loading: false
    }
  },
  methods: {
    // 取消新增
    cancelAdd() {
      this.$emit('cancelAdd')
    },

    // 确定新增
    confirmAdd() {
      console.log('新增的数据：', this.addFrom)
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.$emit('confirmAdd')
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/table.scss';
</style>
